﻿<%@ Page Language="C#" Title="" MasterPageFile="~/EventsParent.Master" AutoEventWireup="true" CodeBehind="CreateGuest.aspx.cs" Inherits="WebFrontEnd.CreateGuest" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style type="text/css">
        span.radio {
            padding: 0px;
        }

            span.radio > input[type="radio"] {
                margin: 8px -5px 7px 0px;
            }

            span.radio > label {
                float: left;
                margin-right: 5px;
                padding: 5px 5px 0px 10px;
            }
    </style>
    <link href="css/select2.css" rel="stylesheet" />
    <script type="text/javascript" src="js/select2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var MaleDiv = $("#<%Response.Write(MaleFirstNameDiv.ClientID);%>"),
             FemaleDiv = $("#<%Response.Write(FemaleFirstNameDiv.ClientID);%>"),
             MaleLabel = $("#<%Response.Write(MaleFirstNameLabel.ClientID);%>"),
             FemaleLabel = $("#<%Response.Write(FemaleFirstNameLabel.ClientID);%>"),
             MaleInput = $("#<%Response.Write(MaleFirstNameInput.ClientID);%>"),
             FemaleInput = $("#<%Response.Write(FemaleFirstNameInput.ClientID);%>"),
             LastNameInput = $("#<%Response.Write(LastNameInput.ClientID);%>");
            function setUpForm() {
                var button = $(this).val();
                switch (button) {
                    case "singlemale":
                        MaleDiv.show();
                        MaleLabel.text('First Name');
                        MaleInput.attr('placeholder', 'Enter your guest\'s first name');
                        LastNameInput.attr('placeholder', 'Enter your guest\'s last name');
                        FemaleDiv.hide();
                        break;
                    case "singlefemale":
                        MaleDiv.hide();
                        FemaleLabel.text('First Name');
                        FemaleInput.attr('placeholder', 'Enter your guest\'s first name');
                        LastNameInput.attr('placeholder', 'Enter your guest\'s last name');
                        FemaleDiv.show();
                        break;
                    case "couple":
                        FemaleLabel.text('Wife\'s First Name');
                        FemaleInput.attr('placeholder', 'Enter the wife\'s first name');
                        MaleLabel.text('Husband\'s First Name');
                        MaleInput.attr('placeholder', 'Enter the husband\'s first name');
                        FemaleDiv.show();
                        MaleDiv.show();
                        LastNameInput.attr('placeholder', 'Enter couple\'s last name');
                        break;
                }
            }
            $("input[type='radio']").click(setUpForm);
            $("input[value='<% Response.Write(GuestTypeRadioInput.SelectedValue); %>']").click();
            var cityinput = $("#<% Response.Write(CityInput.ClientID); %>");
            cityinput.select2({
                placeholder: "Search for a city",
                minimumInputLength: 1,
                ajax: {
                    url: "CreateGuest.aspx/GetCities",
                    dataType: "json",
                    data: function (term, page) {
                        return JSON.stringify({
                            q: term
                        });
                    },
                    results: function (data, page) {
                        return { results: JSON.parse(data.d) }
                    },
                    params: {
                        contentType: "application/json; charset=utf-8",
                        type: "POST"
                    }
                },
                formatResult: function (city) {
                    return city.name;
                },
                formatSelection: function (city) {
                    return city.name;
                },
                initSelection: function (element, callback) {
                    if (cityinput.data('cityid') && cityinput.data('cityname')){
                        callback({ 'id': cityinput.data('cityid'), 'name': cityinput.data('cityname') });
                    }
                }
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="NavBar" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <div class="page-header">
        <h1>Add a New Guest to the Database</h1>
    </div>
    <div class="row-fluid">
        <div class="span7 offset3 well">
            <fieldset>
                <legend>New Guest Form</legend>
                <div id="erroralert" runat="server"></div>
                <div class="row-fluid">
                    <div class="span12" style="border-bottom: 1px solid #e5e5e5; margin-bottom: 20px;">
                        <label for="<% Response.Write(GuestTypeRadioInput.ClientID); %>">Select the type of guest</label>
                        <asp:RadioButtonList
                            ID="GuestTypeRadioInput"
                            runat="server"
                            CssClass="radio" RepeatLayout="Flow"
                            RepeatDirection="Horizontal">
                            <asp:ListItem Text="Single Male" Value="singlemale" />
                            <asp:ListItem Text="Single Female" Value="singlefemale" />
                            <asp:ListItem Text="Couple" Value="couple" Selected="True" />
                        </asp:RadioButtonList>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span6">
                          <asp:ValidationSummary ID="ValidationSummary2" CssClass="alert alert-error" ValidationGroup="guestGroup" runat="server" HeaderText="<a class='close' data-dismiss='alert'>×</a>There were some errors..."/>
                        <div class="control-group">
                            <label class="control-label" for="username">Email</label>
                            <div class="controls">
                                <asp:TextBox placeholder="The guest's Email Address" runat="server" ID="GuestEmail" TextMode="Email" CssClass="input-large" />
                                     <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="GuestEmail"
                                  ErrorMessage="Email is required." 
                                    CssClass="yorkin-error" 
                                  ValidationGroup="guestGroup">*</asp:RequiredFieldValidator>
                                 <asp:RegularExpressionValidator ID="regexEmailValid" ValidationGroup="guestGroup" runat="server" ValidationExpression="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ControlToValidate="GuestEmail" CssClass="yorkin-error" ErrorMessage="Invalid Email Format">*</asp:RegularExpressionValidator>
                                 </div>
                        </div>
               

                        <div class="control-group" runat="server" id="MaleFirstNameDiv">
                            <label class="control-label" runat="server" id="MaleFirstNameLabel" for="<% Response.Write(MaleFirstNameInput.ClientID); %>">Enter the husband's first name</label>
                            <div class="controls">
                                <asp:TextBox runat="server" ID="MaleFirstNameInput" CssClass="input-large" />
                            </div>
                        </div>

              
                        <div class="control-group" runat="server" id="FemaleFirstNameDiv">
                            <label class="control-label" runat="server" id="FemaleFirstNameLabel" for="<% Response.Write(FemaleFirstNameInput.ClientID); %>">Enter the wife's first name</label>
                            <div class="controls">
                                <asp:TextBox runat="server" ID="FemaleFirstNameInput" CssClass="input-large" />
                            </div>
                        </div>
             
                        <div class="control-group">
                            <label class="control-label" runat="server" id="LastNameLabel" for="<% Response.Write(LastNameInput.ClientID); %>">Last Name</label>
                            <div class="controls">
                                <asp:TextBox runat="server" ID="LastNameInput" placeholder="Enter the couple's last name" CssClass="input-large" />
                                  <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="LastNameInput"
                        ErrorMessage="Last Name is required." 
                        CssClass="yorkin-error" 
                        ValidationGroup="guestGroup">*</asp:RequiredFieldValidator>
                            </div>
                        </div>
                       
                    </div>
                    <div class="span6">
                        <fieldset>
                            <legend style="font-size: 18px;">Mailing Address</legend>
                            <div class="row-fluid">
                                <span class="span6">
                                    <asp:TextBox runat="server" ID="HouseNumberInput" TextMode="Number" CssClass="input-small" placeholder="House #" />
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="HouseNumberInput"
                                  ErrorMessage="House Number is required."
                                  CssClass="yorkin-error" 
                                 ValidationGroup="guestGroup">*</asp:RequiredFieldValidator>
                                </span>
                                 
                                <span class="span6">
                                    <asp:TextBox runat="server" ID="ApartmentNumberInput" TextMode="Number" CssClass="input-small" placeholder="Apt #" />
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="ApartmentNumberInput"
                                  ErrorMessage="Apartment Number is required."
                                  CssClass="yorkin-error" 
                                 ValidationGroup="guestGroup">*</asp:RequiredFieldValidator>
                                      </span>
                              
                            </div>
                            <asp:TextBox runat="server" ID="StreetInput" CssClass="input-medium" placeholder="Street" />
                                     <asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" ControlToValidate="StreetInput"
                                  ErrorMessage="Street is required." 
                                  CssClass="yorkin-error" 
                                 ValidationGroup="guestGroup">*</asp:RequiredFieldValidator>
                            <div class="control-group">
                                <asp:Label AssociatedControlID="CityInput" ID="CityLabel" runat="server" Text="City" />
                                <asp:TextBox ID="CityInput" CssClass="span12" runat="server" />
                                         <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ControlToValidate="CityInput"
                                  ErrorMessage="City is required." 
                                  CssClass="yorkin-error" 
                                 ValidationGroup="guestGroup">*</asp:RequiredFieldValidator>
                            </div>
                   
                        </fieldset>                        
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span6 offset3">
                        <div style="margin-top: 30px;">
                            <asp:Button OnClick="CreateButton_Click" Text="Create Guest!" CssClass="btn btn-primary btn-large btn-block" runat="server" ID="CreateButton" ValidationGroup="guestGroup"/>
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
</asp:Content>
